<template>
  <input 
    @focus="isFocus=true"
    @blur="isFocus=false"
    :class="{inputFocus:isFocus,inputBulr: !inputFocus}"
    />
</template>

<script>
export default {
    data() {
        return {
            isFocus:false,
        }
    },
    methods: {},
}
</script>
<style scoped>
input{
    width: 10px;
    transition: all 1s;
}
.inputFocus{
    width: 150px;
}
.inputBlur{
    width: 10px;
}

</style>